import { Component, createContext } from "react";

const { Provider,Consumer } = createContext()

function Jack() {
    return (
        <div>
            <span>This is Jack </span>
            <Jason />
        </div>
    )
}

function Jason() {
    return(
        <div>
            This is Jason
            <Lily />
        </div>
    )
}

function Lily() {
    return(
        <div>
            This is Lily:
            <Consumer>{value => <span>I heard {value}</span>}</Consumer>
        </div>
    )
}

export default class TestBrotherCommunication extends Component {
    state = {
        data: ''
    }
    sendData = (event) => {
        // 如果用户按下的不是回车键，不执行任何动作
        if(event.keyCode !== 13) return;
        if(event.target.value.trim() === ''){
            alert('不要啥也不填呀 o(╥﹏╥)o')
            return
        }

       this.setState({
           data: event.target.value
       })
    }

    render() {

        return (
            <div>
                <input type="text" onKeyUp={this.sendData} />
                <Provider value={this.state.data}>
                    <Jack />
                </Provider>
                
            </div>
        )
    }
}